<template>
    <div class="header-bar">
        <h1 class="title">
            <router-link :to="{name: 'HomeView'}">Vue</router-link>
        </h1>
        <ul class="nav">
            <li>
                <router-link :to="{name: 'MovieView'}">电影</router-link>
            </li>
            <li>
                <router-link :to="{name: 'BookView'}">图书</router-link>
            </li>
            <li>
                <router-link :to="{name: 'NewsView'}">新闻</router-link>
            </li>
            <li>
                <router-link :to="{name: 'GroupView'}">小组</router-link>
            </li>
        </ul>
        <span class="talion" @click="showTalion"></span>
    </div>
</template>

<script>
    export default {
        name: 'header-bar',
        data() {
            return {}
        },
        methods: {
            showTalion: function(){
                this.$emit('showTalion')
            }
        }
    }
</script>

<style lang="scss" scoped>
.header-bar {
  .title {
    // flex: 1;
    // max-width: 4.6rem;
    // max-height: 2.2rem;
    // margin-right: 1.8rem;
    // font-size: 0;
    // line-height: 3.2rem;
    // color: #00b600;
    // word-break: break-all;
    // // background: url() no-repeat;
    // background-size: cover;

    a {
      display: block;
    }
  }

  ul {
    display: flex;
    flex: 1;
    justify-content: flex-end;
  }

  li {
    display: inline-block;
    font-size: 1.6rem;
    margin-right: 1.2rem;
  }

  .talion {
    font-size: 0;
    background: url() no-repeat;
    background-size: cover;
    width: 2.4rem;
    height: 1.8rem;
    margin-top: 0.4rem;
  }
}
</style>